<template> 
	<div class="ccmain">
		<div class="block_item" v-if="listArr.length>0" v-for="(item, index) in listArr" :key="index" @click.stop="addOrRemove1(item,index)">
			<div class="abos1 flex-h">
				<span class="sp0">
					<img class="imgIcon" :src="checklist1.indexOf(item.catalogName) !== -1?imgs1:imgs2" alt="">
				</span>
				<span class="flex1 sp1">
					<b class="b1">{{ item.catalogName }}</b>

					<b class="b2">{{item.majorName}}</b>
				</span>
				<span style="width: 1rem;height: 1rem;text-align: center;line-height: 1rem;" class="sp2" @click.stop="removeItem(listArr, item)">
					<!-- X -->
					<img class="imgIcon" style="width: 0.2rem;height: 0.2rem;" src="~/static/icon/xx.png" alt="">
				</span>
			</div>
		</div>
		<div class="block_item" v-for="index of forNum" :key="index+Math.random()">
			<div class="abos">
				<span class="left">{{ leftTitle }}</span>
				<span class="right" @click="handleClick">
					<small>去选择</small>
				</span>
			</div> 
		</div>
		<PopSelect ref="mychild" :yixuan='yxnum' :popupShow="isPopupShow" :placeholderText="plhdText" @closePopUp="changeStatus" @sendList="listContentChange"
		 :status='statu'></PopSelect>
	</div>
</template>

<script>
	import PopSelect from '~/components/PopSelect'
	export default {
		props: {
			leftTitle: String,
			showArr: Array,
			plhdText: String, 
			modelType: String,
			xxNum: Number
		},
		components: {
			PopSelect,
		},
		data() {
			return {
				isPopupShow: false,
				listArr: [],
				sendObj: {},
				statu: '',
				forNum: 10,
				yxnum: 0,
				nonum: 100,
				imgs1: require('~/static/images/search_icon_sure.png'),
				imgs2: require('~/static/images/search_icon_nor.png'),
				checklist1: [],
				xxxNum: 10

			}
		},
		watch: {
			showArr(arr) {
				this.listArr = arr;
				this.forNum = 10 - arr.length;
				this.yxnum = arr.length
			}
		},
		mounted() {
			this.listArr = this.showArr;
			this.sendObj.type = this.modelType;
		},
		methods: {
			addOrRemove1(item, index) {
				this.xxxNum = this.$store.state.xxNum
				if (this.checklist1.indexOf(item.catalogName) == -1) {
					this.checklist1.push(item.catalogName);
					this.xxxNum -= 1
				} else {
					this.xxxNum += 1
					this.checklist1 = this.checklist1.filter((x) => {
						return x !== item.catalogName;
					})
				}
				this.$emit('fromGetChose', this.checklist1)
				this.$store.commit('changexxNum', this.xxxNum)
			},
			cls(index) {
				this.nonum = index
			},
			handleClick() {
				this.isPopupShow = true;		
				this.statu = this.modelType
				this.xxxNum = this.$store.state.xxNum
	            this.$refs.mychild.getMajorData("");
			},
			removeItem(arr, item) {
				if (this.checklist1.indexOf(item.catalogName) == -1) {
				this.checklist1 = this.checklist1.filter((x) => {
					return x !== item.catalogName;				
				})
				let xxs =10-(this.checklist1.length);
				this.$store.commit('changexxNum', xxs)
				this.listArr = arr.filter((x) => {
					return x !== item;
				});
				this.sendObj.msgList = this.listArr;
				this.$emit('removeArrItem', this.sendObj)
				}else{
					this.addOrRemove1(item)
				}																	
			},
			changeStatus() {
				this.isPopupShow = false;
			},
			listContentChange(arr) {
				for (const item of arr) {
					if (this.listArr.indexOf(item) == -1) {
						this.listArr.push(item);
					}
				}
				this.isPopupShow = false;
			}
		}
	}
</script>

<style lang="less" scoped>
	.ccmain {
		background: #fff;
		width: 100%;

		.block_item {
			border: 1px solid #EEE;
			width: 100%;
			min-height: 1.5rem;
			height: auto;
			overflow: hidden;

			.abos {
				width: 6.3rem;
				height: 0.9rem;
				line-height: 0.9rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 1rem;
				box-sizing: border-box;
				margin-top: 0.3rem;

				.left {
					font-size: 0.26rem;
					font-family: 'PingFang-SC-Bold';
					font-weight: bold;
					color: rgba(153, 153, 153, 1);
				}

				.right {
					display: flex;
					align-items: center;

					small {
						text-align: center;
						line-height: 0.6rem;
						width: 1.8rem;
						height: 0.6rem;
						background: #FFF;
						border: 1px solid @mainColor;
						border-radius: 0.1rem;
						outline: none;
						color:@mainColor;
						// font-weight: bold;
						letter-spacing: 0.03rem;
					}
				}
			}

			.abos1 {
				min-height: 1.5rem;
				height: auto;
				padding: 0.3rem 0.3rem 0.3rem 0rem;
				box-sizing: border-box;
				width: 100%;

				.sp0 {
					width: 1rem;
					// height: 1.5rem;
					text-align: center;

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;

					}
				}

				.sp1 {
					padding-right: 0.2rem;
					box-sizing: border-box;

					b {
						display: block;
						height: auto;
						line-height: 0.35rem;
					}

					.b1 {
						font-size: 0.3rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
					}

					.b2 {
						font-size: 0.26rem;
						font-weight: bold;
						color: rgba(187, 187, 187, 1);
					}

				}
			}

			.abos_list {
				list-style: none;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				align-items: center;
				padding-left: 1rem;
				box-sizing: border-box;

				li {
					margin: 0.1rem 0;
					padding: 0.17rem 0.2rem 0.16rem 0.2rem;
					background: #FAFAFA;
					color: #222;
					font-size: 0.26rem;
					border-radius: 0.1rem;
					margin-bottom: 0.1rem;
					margin-right: 0.12rem;

					small {
						margin-left: 0.2rem;
						width: 0.2rem;
						height: 0.2rem;
						color: #BBB;
					}
				}

			}
		}

		.block_item:first-child {
			border-top-left-radius: 0.1rem;
			border-top-right-radius: 0.1rem;
		}

		.block_item:last-child {
			border-bottom-left-radius: 0.1rem;
			border-bottom-right-radius: 0.1rem;
		}

		.block_item:nth-child(2),
		.block_item:nth-child(3) {
			border-top: none;
		}
	}

	.imgIcon {
		width: 0.4rem;
		height: 0.4rem;
	}
</style>
